export default {
  data () {
    return {
      rolesList: [
        {
          roleName: '主管',
          roleDesc: '技术负责人'
        }
      ],
      // 显示分配权限对话框
      dialogAssignRightsVisible: false,
      data2: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1'
                },
                {
                  id: 10,
                  label: '三级 1-1-2'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 5,
              label: '二级 2-1'
            },
            {
              id: 6,
              label: '二级 2-2'
            }
          ]
        },
        {
          id: 3,
          label: '一级 3',
          children: [
            {
              id: 7,
              label: '二级 3-1'
            },
            {
              id: 8,
              label: '二级 3-2'
            }
          ]
        }
      ],
      // 配置选项
      defaultProps: {
        children: 'children',
        label: 'authName'
      },
      // 角色id
      roleId: 0
    }
  },
  created () {
    this.loadRolesList()
    this.loadRightsList()
  },
  methods: {
    /**
     * 加载角色列表
     */
    async loadRolesList () {
      let res = await this.$axios.get('roles')
      console.log(res)
      this.rolesList = res.data.data
    },
    /**
     * 处理索引
     */
    indexMathod (index) {
      // 0 12
      return index
    },
    /**
     * 展示分配权限对话框
     */
    showAssignRightsDialog (row) {
      // 存id (表单对象存id 自己存id)
      // console.log(row.id)
      this.roleId = row.id

      // 1. 显示对话框
      this.dialogAssignRightsVisible = true

      // 2. 如何拿到第三层的id
      let keys = []
      row.children.forEach(item1 => {
        item1.children.forEach(item2 => {
          item2.children.forEach(item3 => {
            keys.push(item3.id)
          })
        })
      })

      // console.log(keys)

      // 设置选中的key
      // 105=> 添加商品
      // DOM异步更新
      // setTimeout(() => {
      //   console.log(this.$refs)
      // }, 1000)
      // DOM更新完了,自动会执行该方法里的回调
      // 3. 设置拥有的权限
      this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys(keys)
      })
    },
    /**
     * 加载权限数据
     */
    async loadRightsList () {
      let res = await this.$axios.get('rights/tree')
      console.log(res)
      this.data2 = res.data.data
    },
    /**
     * 分配权限
     */
    async assignRights () {
      // rids  所有的权限的id
      // √ 选中的id
      let keys1 = this.$refs.tree.getCheckedKeys()
      console.log(keys1)

      // - 半选的id
      let keys2 = this.$refs.tree.getHalfCheckedKeys()
      console.log(keys2)

      // 拼接到一起
      let keys = keys1.concat(keys2)

      // 给每个角色分配权限 (角色授权)
      // 以后如果在发送请求的时候,需要一个参数
      // 1-data里有没有
      // 2-传参
      let res = await this.$axios.post(`roles/${this.roleId}/rights`, {
        rids: keys.join(',')
      })
      console.log(res)
      if (res.data.meta.status === 200) {
        // 关闭对话框
        this.dialogAssignRightsVisible = false
        // 页面刷新一下
        this.loadRolesList()

        // 提示
        this.$message({
          message: '更新成功',
          type: 'success'
        })
      }
    }
  }
}
